<template>
    <div :id="id" :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
   import echarts from 'echarts'
   require('echarts/theme/macarons') // echarts theme
   import resize from '../mixins/resize'
    export default {
        mixins: [resize],
        props: {
            id: {
                type: String,
                default: 'chart'
            },
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '350px'
            },
            autoResize: {
                type: Boolean,
                default: true
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions({ xData, cxData, ybData } = {}) {
                this.chart.setOption({
                    grid: {
                        left: 10,
                        right: 16,
                        bottom: 20,
                        top: 30,
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        padding: [5, 10]
                    },
                    legend: {
                        // x:'left',
                        data:[{
                            name:'畅行无忧',
                            textStyle:{
                                color:'#0C5FDC',
                                fontSize: 10
                            }
                        },{
                            name:'延保服务',
                            textStyle: {
                                color:'#22D17A',
                                fontSize: 10
                            }
                        }],
                        // data: ['畅行无忧', '延保'],
                    },
                    // dataZoom: [{    // 滚动条
                    //     type: 'slider',
                    //     show: false,
                    //     xAxisIndex: [0],
                    //     left: '9%',
                    //     bottom: -5,
                    //     start: 10,
                    //     end: 90 //初始化滚动条
                    // }],
                    xAxis: {
                        // offset: -10,
                        splitLine:{show: true},
                        splitArea : {show : false},
                        boundaryGap: false,
                        axisTick: {
                            show: false
                        },
                        axisLine: {onZero: true},
                        data: xData,
                        axisLine:{
                            lineStyle:{
                                color:'#dddddd',
                                width:1,//这里是为了突出显示加上的
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#50576A',
                                fontSize : 12      //更改坐标轴文字大小
                            }
                        },
                        
                    },
                    yAxis: {
                        splitLine:{show: true},//去除网格线
                        splitArea : {show : false},
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#dddddd',
                                width:1,//这里是为了突出显示加上的
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#50576A',
                                fontSize : 12
                            }
                        },
                    },
                    color: ['#0C5FDC','#22D17A'],
                    series: [
                        {
                            name: '畅行无忧',
                            data: cxData,
                            itemStyle: {
                                normal: {
                                // color: '#0C5FDC',
                                lineStyle: {
                                    // color: '#0C5FDC',
                                    width: 2
                                }
                                }
                            },
                            smooth: true,
                            type: 'line',
                            animationDuration: 2800,
                            animationEasing: 'cubicInOut'
                        },
                        {
                            name: '延保服务',
                            type: 'line',
                            data: ybData,
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    // color: '#22D17A',
                                    lineStyle: {
                                        // color: '#22D17A',
                                        width: 2
                                    },
                                    // areaStyle: {
                                    //     // color: '#22D17A'
                                    // }
                                }
                            },
                            animationDuration: 2800,
                            animationEasing: 'quadraticOut'
                        }
                    ]
                })

            }
        }
    }
</script>
